import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import Navbar from '../navbar'
import Router, {Link} from'react-router'
import store from '../store'
import actions from '../actions'
import 'babel-polyfill';

export default class EditAddress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: this.props.location.query.index,
            addressItem: {},
            changeItem: {},
            item: {},
            active: false,
            id:""

        }
    }

    setValue() {
        this.refs.name.value = this.state.addressItem.shoppingMan;
        this.refs.phone.value = this.state.addressItem.shoppingManPhone;
        this.refs.address.value = this.state.addressItem.locationId;
        this.refs.place.value = this.state.addressItem.address;
    }

    componentDidMount() {
        let _self = this;
        actions.getAddressItem(()=>{
            _self.setValue()
        });
    }

    defaultAddressBtn() {
        this.setState({
            active: !this.state.active
        })
    }

    saveChange() {
        let item = {
            name: this.refs.name.value,
            phone: this.refs.phone.value,
            address: this.refs.address.value,
            place: this.refs.place.value,
            isDef: this.state.addressItem.isDef,
            id: this.state.addressItem.id
        };
        actions.saveChange(item,this.state.index);
    }

    render() {
        return (
            <div className="address-add">
                <Navbar title="编辑地址"/>
                <div className="address-add-box">
                    <div className="address-add-name">收货人：
                        <input className="address-add-name-input" ref="name" type="text"/>
                    </div>
                    <div className="address-add-phone">
                        手机号：
                        <input className="address-add-phone-input" ref="phone" type="text"/>
                    </div>
                    <div className="address-add-address">
                        省、市、区：
                        <input className="address-add-address-input" ref="address" type="text"/>
                        <i className="iconfont icon-next"></i>
                    </div>
                    <div className="address-add-place">
                        街道地址：
                        <textarea className="address-add-place-input" ref="place" type="text"/>
                    </div>
                    <div className="address-add-set">
                        <div className="address-add-set-left">
                            默认地址：
                            <span className="address-add-set-left-s">每次下单默认使用该地址</span>

                        </div>
                        <div className={`address-add-set-right ${this.state.active ? "active" : ""}`}
                             onClick={this.defaultAddressBtn.bind(this)}>
                            <div className={`address-add-set-right-c ${this.state.active ? "active" : ""}`}></div>
                        </div>
                    </div>
                </div>

                <Link to="/address">
                    <div className="address-btn" onClick={this.saveChange.bind(this)}>
                        保存并应用
                    </div>
                </Link>
            </div>
        )
    }
}
ReactMixin.onClass(EditAddress, Reflux.connect(store));
